<template>
    <div></div>
</template>

<script setup>
import { onMounted, inject, onBeforeUnmount } from 'vue'
import { onBeforeRouteUpdate } from 'vue-router'
import { DrawLine, DrawCircle, DrawRect, DrawPolygon } from '@antv/l7-draw'
const { map, scene } = inject('mapScene')
let draw
onMounted(() => { })
function initDraw(type) {
    //根据type参数确定绘制的形状
    if (draw) {
        draw.destroy()
        draw = null
    }
    switch (type) {
        case 'line': {
            draw = new DrawLine(scene, {
                distanceOptions: {},
                color: 'red',
                width: 2
            })
            break
        }
        case 'rect': {
            draw = new DrawRect(scene, {
                distanceOptions: {},
            })
            break
        }
        case 'circle': {
            draw = new DrawCircle(scene, {
                distanceOptions: {},
            })
            break
        }
        case 'polygon': {
            draw = new DrawPolygon(scene, {
                distanceOptions: {},
            })
            break
        }
    }
    draw.enable()
}
onBeforeRouteUpdate(to => {
    //接受路由参数
    const type = to.params.type
    initDraw(type)
})
onBeforeUnmount(() => {
    if (draw) {
        draw.destroy()
    }
})
</script>

<style lang="scss" scoped></style>